<template>
	<div class="center_right_exam">
		<div class="center_rightlabel_navs">
			<div @click="changeType(item)" :class="type == item.value ? 'active' : ''" class="center_rightlabel_nav"
				v-for="item in types">{{ item.name }}</div>
		</div>
		<div class="center_right">
			<div class="center_rightcont beautifulScroll" v-if="type == 'DCM'">
				<div class="center_rightable">
					<div class="center_rightable_search">
						<el-input @keyup.enter.native="currentChange(1)" placeholder="请输入病例名称"
							prefix-icon="el-icon-search" v-model="imageName" size='small'
							style="width:200px;margin: 0 10px 0 0;" clearable />
						<span class="index_mainsearch_label">浏览时间</span>
						<el-date-picker v-model="startEndImg" @change='currentChange(1)' type="daterange"
							value-format='yyyy-MM-dd' size='small' start-placeholder="开始日期" end-placeholder="结束日期"
							style="width:300px;margin: 0 10px 0 0;" clearabled></el-date-picker>
						<el-button type="primary" @click="currentChange(1)" size='small'>搜索</el-button>
						<el-button type="primary" @click="research" size='small'>重置</el-button>
					</div>
					<el-table :data="dataList" border>
						<el-table-column label="序号" align='center' width='60'>
							<template slot-scope="scope">
								{{ scope.$index + 1 }}
							</template>
						</el-table-column>
						<el-table-column prop="name" label="影像名称" align='center'>
						</el-table-column>
						<el-table-column prop="viewNumber" label="学习次数" align='center'>
						</el-table-column>
						<el-table-column prop="viewTime" label="浏览时间" align='center'>
						</el-table-column>
						<el-table-column label="操作" align="center" width='120'>
							<template slot-scope="scope">
								<el-button type="text" @click="openView(scope.row, 'image')">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="index_mainpages top">
						<el-pagination hide-on-single-page background @current-change="currentChange"
							:current-page="pageNum" :page-size="pageSize" layout="total,  prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="center_rightcont beautifulScroll" v-if="type == 'CASE'">
				<div class="center_rightable">
					<div class="center_rightable_search">
						<el-input @keyup.enter.native="currentCaseChange(1)" placeholder="请输入病例名称"
							prefix-icon="el-icon-search" v-model="caseName" size='small'
							style="width:200px;margin: 0 10px 0 0;" clearable />
						<span class="index_mainsearch_label">浏览时间</span>
						<el-date-picker v-model="startEndCase" @change='currentCaseChange(1)' type="daterange"
							value-format='yyyy-MM-dd' size='small' start-placeholder="开始日期" end-placeholder="结束日期"
							style="width:300px;margin: 0 10px 0 0;" clearabled></el-date-picker>
						<el-button type="primary" @click="currentCaseChange(1)" size='small'>搜索</el-button>
						<el-button type="primary" @click="researchCase" size='small'>重置</el-button>
					</div>
					<el-table :data="dataCaseList" border>
						<el-table-column label="序号" align='center' width='60'>
							<template slot-scope="scope">
								{{ scope.$index + 1 }}
							</template>
						</el-table-column>
						<el-table-column prop="number" label="病历号" align='center'>
						</el-table-column>
						<el-table-column prop="name" label="病例名称" align='center'>
						</el-table-column>
						<el-table-column prop="viewNumber" label="学习次数" align='center'>
						</el-table-column>
						<el-table-column prop="viewTime" label="浏览时间" align='center'>
						</el-table-column>
						<el-table-column label="操作" align="center" width='120'>
							<template slot-scope="scope">
								<el-button type="text" @click="openView(scope.row, 'case')">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="index_mainpages top">
						<el-pagination hide-on-single-page background @current-change="currentCaseChange"
							:current-page="pageCaseNum" :page-size="pageSize" layout="total,  prev, pager, next, jumper"
							:total="totalCase">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { viewList } from '@/api/center.js'
export default {
	data() {
		return {
			type: 'DCM',
			types: [{
				name: '影像数据库',
				value: 'DCM'
			}, {
				name: '诊断思维练习',
				value: 'CASE'
			}],
			pageSize: 8,
			imageName: '',
			startEndImg: [],
			dataList: [],
			pageNum: 1,
			total: 0,

			startEndCase: [],
			caseName: '',
			dataCaseList: [],
			pageCaseNum: 1,
			totalCase: 0,
		}
	},
	created() {
		this.getDataList();
		this.getDataCaseList();
	},
	mounted() {

	},
	methods: {
		openView(item, type) {
			if (type == 'image') {
				const routeUrl = this.$router.resolve({
					name: 'imagedetail',
					query: {
						dcmId: item.dataId,
						stuuid: item.stuuid,
					}
				})
				window.open(routeUrl.href, '_blank')
			}
			if (type == 'case') {
				const routeUrl = this.$router.resolve({
					name: 'caseimage',
					query: {
						caseId: item.dataId,
					}
				})
				window.open(routeUrl.href, '_blank')
			}
		},
		changeType(item) {
			if (this.type != item.value) {
				this.type = item.value
			}
		},
		research() {
			this.imageName = '';
			this.startEndImg = []
			this.currentChange(1)
		},
		currentChange(pageNum) {
			this.pageNum = pageNum;
			this.getDataList();
		},
		getDataList() {
			viewList({
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				type: 'DCM',
				name: this.imageName,
				startTime: this.startEndImg && this.startEndImg.length == 2 ? this.startEndImg[0] : null,
				endTime: this.startEndImg && this.startEndImg.length == 2 ? this.startEndImg[1] : null,
			}).then(res => {
				this.dataList = res.data.list;
				this.total = res.data.total;
			})
		},
		researchCase() {
			this.caseName = '';
			this.startEndCase = []
			this.currentCaseChange(1)
		},
		currentCaseChange(pageNum) {
			this.pageCaseNum = pageNum;
			this.getDataCaseList();
		},
		getDataCaseList() {
			viewList({
				pageSize: this.pageSize,
				pageNum: this.pageCaseNum,
				type: 'CASE',
				name: this.caseName,
				startTime: this.startEndCase && this.startEndCase.length == 2 ? this.startEndCase[0] : null,
				endTime: this.startEndCase && this.startEndCase.length == 2 ? this.startEndCase[1] : null,
			}).then(res => {
				this.dataCaseList = res.data.list;
				this.totalCase = res.data.total;
			})
		},
	},
}
</script>